<template>
<div>


   <div class="user-table">
 
                <div class="price  mt10 bg-white">
                    <dl>
                      <dt>
                        <div id="register" style="height:350px;width:550px;"></div>
                      </dt>
                    </dl>
                </div>
      
                <div class="price  mt10 bg-white">
                    
                </div>

          
    </div>
    </div>
</template>

<script>
var echarts = require("echarts");
import service from "@/service/index_c";
export default {
  data() {
    return {
     
      current: {},
      before: {},
      times: "",
      percentage:0
    };
  },
  mounted() {
   //this.queryChartNewInfoData();
     this.queryChartPie();
  },
  methods: {
    async queryChartNewInfoData(day = 30) {
      let res = await service.haiheiServerDataUserNewInfo({
        proxyDay_biQuery: day
      });
      this.times = res.time;
      if (res.success) {
        this.before = res.result.before;
        this.current = res.result.current;
        this.percentage=(this.current.lcRate.replace('%','')-0);
        this.queryChartPie();
      }
    },
    queryChartPie() {
      let worldMapContainer = document.getElementById("register");
      var myChart = echarts.init(worldMapContainer);
      let option = {
    title : {
        text: '订单来源',
        subtext: '',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    

    calculable : false,
    series : [
        
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['50%', '50%'],
            roseType : 'area',
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
      };
      myChart.setOption(option, true);
    }
  }
};
</script>

<style scoped>
.user-table {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.price {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 49%;
  height: 450px;
}
dl {
  text-align: center;
}
dl dt {
  font-size: 30px;
  color: #00aeff;
}
dl dd {
  margin-top: 10px;
  color: #6d727a;
  font-size: 12px;
}
</style>